<template>
  <div class="calend">
    <div class="head">
      <van-nav-bar title="学习日历" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="18" @click-right="onClickRight" />
        </template>
      </van-nav-bar>
    </div>

    <div class="count">
      <van-calendar
        :show-title="false"
        :poppable="false"
        :show-confirm="false"
        type="range"
        :formatter="formatter"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        :style="{ height: '500px' }"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2060, 0, 1),
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/index");
    },
    onClickRight() {},
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    formatter(day) {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
        if (date === 1) {
          day.topInfo = '劳动节';
        } else if (date === 4) {
          day.topInfo = '青年节';
        } else if (date === 11) {
          day.text = '今天';
        }
      }

      if (day.type === 'start') {
        day.bottomInfo = '开始';
      } else if (day.type === 'end') {
        day.bottomInfo = '结束';
      }

      return day;
    },
  },
};
</script>

<style lang="scss" scoped>
    .calend{
        height: 100vh;
        background-color: #fff;
    }
    .head,.count{
        width: 100vw;
    }
</style>